import './App.less';

import {useEffect, useRef, useState} from 'react';
import {deleteProjectList, getProjectList} from '@/api/index.js';
import {useNavigate} from 'react-router';
import {DeleteOutlined, EditOutlined, PlusOutlined} from '@ant-design/icons';
import {Card, Popconfirm} from 'antd';
import NewProject from '@/components/newProject';
function App() {
    const {Meta} = Card;
    // const {currentProjectId, dispatch} = useStore();

    const navigate = useNavigate();
    const [projectList, setProjectList] = useState([]);
    const initProjectListData = () => {
        // getProjectList().then((res = []) => {
        //     setProjectList(res.reverse());
        // });
    };
    useEffect(() => {
        initProjectListData();
    }, []);
    const startDesign = (project) => {
        // dispatch({
        //     type: 'currentProjectId',
        //     data: project.id
        // });
        navigate('/design');
    };
    const NewProjectRef = useRef();
    const deleteProject = (id) => {
        // deleteProjectList(id).then(() => {
        //     initProjectListData();
        // });
    };
    return (
        <>
            <NewProject ref={NewProjectRef} onSuccess={initProjectListData} />
            <div className="app-container app">
                <Card
                    hoverable={true}
                    key="-1"
                    className="project-list-item add-btn"
                    onClick={() => {
                        NewProjectRef.current.open();
                    }}>
                    <PlusOutlined />
                </Card>
                {projectList.map((project, index) => {
                    return (
                        <Card
                            hoverable={true}
                            key={index}
                            className="project-list-item"
                            actions={[
                                <EditOutlined
                                    key="edit"
                                    onClick={() => {
                                        startDesign(project);
                                    }}
                                />,
                                <Popconfirm
                                    title="确定要删除吗？"
                                    onConfirm={() => {
                                        deleteProject(project.id);
                                    }}>
                                    <DeleteOutlined style={{color: 'rgb(224,38,38)'}} key="delete" />
                                </Popconfirm>
                            ]}>
                            <Meta title={project.name} description={'#' + (project.desc || '')} />
                        </Card>
                    );
                })}
            </div>
        </>
    );
}
export default App;
